<template>
    <div>
        <div>
            <Row>
                <Col span="24">
                    <span style="font-weight: bold;font-size: small">活动名称：</span><Input v-model="queryData.name" style="width:  120px"></Input>
                    <span style="font-weight: bold;font-size: small">活动时间：</span><DatePicker type="date" style="width: 200px"></DatePicker>
                    <Button type="primary" icon="android-search">查询</Button>
                    <Button type="primary" icon="refresh">重置</Button>
                </Col>
            </Row>
            <Row style="margin-top: 15px;">
                <Col span="24">
                    <Button type="primary" icon="plus" @click="showAdd">新增活动</Button>
                    <Button type="success" icon="plus" @click="doReleaseBath">批量发布活动</Button>
                    <Button type="error" icon="minus" @click="doDelBath">批量删除活动</Button>
                </Col>
            </Row>
        </div>
        <div class="main-table">
            <Table border  :columns="columns" :data="dataList" :highlight-row="true" @on-selection-change="whenSelectRow"></Table>
        </div>
        <div class="pagination">
            <Page border :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="doQuery" show-total show-elevator></Page>
        </div>
        <Modal
                title="新增活动"
                v-model="addVisible"
                :loading="saveLoading"
                :closable="true"
                :mask-closable="false"
                width="50%"
                @on-ok="doSave"
        >
            <Form :label-width="100" :model="formData" :rules="formDataRules" ref="formData">
                <Row>
                    <Col span="12">
                        <FormItem label="活动名称:" prop="name">
                            <Input v-model="formData.name" style="width:200px" ></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="活动地点:">
                            <Input v-model="formData.place" style="width:200px" ></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="活动开始时间:">
                            <DatePicker type="date" style="width: 200px" v-model="formData.startTime"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="活动结束时间:" prop="startTime">
                            <DatePicker type="date" style="width: 200px" v-model="formData.endTime"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="活动人数:">
                            <InputNumber  v-model="formData.limitedPeople" style="width:200px" ></InputNumber >
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="活动价格:" prop="amt">
                            <InputNumber  v-model="formData.amt" style="width:200px" ></InputNumber >
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    </div>
</template>
<style lang="less" scoped src="../public.less"></style>
<script src="./activitymanagement.js"></script>
